<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">

<div th:replace="~{component/head::head}"></div>

<body>

<div th:replace="~{component/header::header}"></div>

<div class="container-fluid">
  <div class="row">

    <div th:replace="~{component/nav::nav}"></div>

    <main id="app" class="col-md-9 ms-sm-auto col-lg-10 px-md-4 p-5">

      <div class="row marketing">
        <div v-for="course in courses" :key="course.id" class="col-lg-4">
          <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>

          <h2>{{course.name}}</h2>
          <p>{{course.desc}}</p>
          <p><a @click="createOrder(course)" class="btn btn-primary" href="#">立即购买 {{course.price}}￥ &raquo;</a></p>
        </div><!-- /.col-lg-4 -->

      </div><!-- /.row -->

      <page @change-page='queryCourse' :pagesize='pagination.pageSize' :total='pagination.total' :page='pagination.current' />

    </main>
  </div>
</div>

<script>
  // 下面这行声明在一个页面只能有一次，header里已经有了，所以这里去掉
  // const {createApp, ref} = Vue;
  const app = createApp({
    components: {
      page
    },
    setup() {
      const courses = ref();
      courses.value = [];
      const pagination = ref({
        current: 1,
        pageSize: 3,
        total: 0
      });

      const queryCourse = function (current) {
        if (Tool.isEmpty(current)) {
          current = 1;
        }
        axios.get("/business/course/query-list", {
          params: {
            page: current,
            size: pagination.value.pageSize
          }
        }).then((response) => {
          const data = response.data;
          if (data.success) {
            courses.value = data.content.list;
            // 设置分页控件的值
            pagination.value.total = Number(data.content.total);
          } else {
            Msg.error(data.message);
          }
        });
      };

      const createOrder = function (course) {
        axios.post("/pay/order-info/add", {
          "business": ORDER_INFO_BUSINESS.COURSE.key,
          "amount": course.price,
          "desc": "购买课程：" + course.name,
          "snapshot": {
            "productId": course.id,
            "productName": course.name,
            "productPrice": course.price,
            "productCount": 1
          }
        }).then((response) => {
          const data = response.data;
          if (data.success) {
            SessionStorage.set("ORDER", data.content);
            window.location.href="cash";
          } else {
            Msg.warning("下单失败");
          }
        });
      };

      onMounted(() => {
        queryCourse();
      });

      return {
        courses,
        createOrder,
        pagination,
        queryCourse
      }
    }
  });
  app.mount("#app");
</script>

</body>
</html>
